<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'
import { getzu, getadd, getfu, organdel, organbian,organxiu } from '../api/axios.js'

let refs = async () => {
  const red = await getzu()
  tableData.value = setMenuData(red.data.data)
}
let reffu = async () => {
  const reds = await getfu()
  reffus.value = reds.data.data
   
    

}
onMounted(() => {
  refs()
  reffu()
})

//表格
const tableData = ref([])
// 获取数据
const reffus = ref()
interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}
function setMenuData(arr: any, id = 0) {
  let menuArr: any = []
  let tempArr: any = []
  arr.forEach((item: any) => {
    if (item.pid == id) {
      tempArr = setMenuData(arr, item.id)
      if (tempArr.length > 0) {
        item.children = tempArr
      }
      menuArr.push(item)
    }
  })
  return menuArr
}
import { reactive } from 'vue'

const form = reactive({
  // pid: "",
  name: '',
  code: "",
  introduce: "",
  managerId: "",
  createTime:'',
  managerName:'',
 
})
//添加
const ids = ref()
const showadd = (id: any) => {
  ids.value = id
  centerDialogVisible.value = true

}
//添加确认
const centerDialogVisible = ref(false)
const addref = async () => {
  const q = {
    name: form.name,
    code: form.code,
    introduce: form.introduce,
    managerId: form.managerId,
    managerName:form.managerName,
    pid: ids.value
  }
  const x = await getadd(q)
  if (form.name == '' || form.code == '' || form.introduce == '' || form.managerId == '') {
    ElMessage({
    message: '内容不能为空',
    type: 'warning',
  })
  } else {
    form.name = ''
    form.code = ''
    form.introduce = ''
    form.managerId = ''
    centerDialogVisible.value = false
    refs()
  }




}
//删除
const centerDialogVisibles = ref(false)
const idd = ref()
const del = (id: any) => {
  idd.value = id
  centerDialogVisibles.value = true



}
//确定删除
const refder = async (idd) => {
  console.log(idd);
  const getdelete = await organdel(idd)
  ElMessage({
    message: '删除成功',
    type: 'success',
  })
  centerDialogVisibles.value = false
  refs()
}
//回显
const refid=ref()
const centerDialogVisiblea = ref(false)
const bian = async (id) => {
  refid.value=id
  centerDialogVisiblea.value = true
  console.log(id);
  const bians = await organbian(id)
  form.name = bians.data.data.name
  form.code = bians.data.data.code
  form.introduce = bians.data.data.introduce
  form.managerId = bians.data.data.managerId
  console.log(bians.data.data);


}
const quxiao = () => {
  form.name = ''
  form.code = ''
  form.introduce = ''
  form.managerId = ''
  centerDialogVisiblea.value = false
}
//修改
const xiu=async(refid)=>{
  const q = {
    name: form.name,
    code: form.code,
    introduce: form.introduce,
    managerId: form.managerId,
    managerName:form.managerName,
    pid: ids.value
  }
      console.log(refid);
      const getxiu=await organxiu(refid,q)
      centerDialogVisiblea.value = false
      ElMessage({
    message: '修改成功',
    type: 'success',
  })
      refs()
      // console.log(getxiu)
      
      
}
</script>

<template>
  <div>
    <el-table :data="tableData" style="width: 100%; " row-key="id"  default-expand-all>
      <el-table-column prop="name" />
      <el-table-column prop="date" />
      <el-table-column prop="managerName" width="100px"/>
      <el-table-column width="100px">
        <template #default=scope>
          <el-dropdown   >
            操作
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="showadd(scope.row.id)">添加子部门</el-dropdown-item>
                <el-dropdown-item @click="bian(scope.row.id)">编辑部门</el-dropdown-item>
                <el-dropdown-item @click="del(scope.row.id)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      
      </el-table-column>
    </el-table>

    <el-dialog v-model="centerDialogVisible" title="新增部门" width="500" align-center>
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="部门名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="部门编码">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="部门负责人">
          <el-select placeholder="部门负责人" clearable v-model="form.managerId">
            <el-option v-for="item in reffus " :label="item.username" :value="item.id" />

          </el-select>
          <!-- <el-input v-model="form.managerId" /> -->
        </el-form-item>
        <el-form-item label="部门介绍">
          <el-input v-model="form.introduce" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addref(ids)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>


    <!-- 删除弹框 -->

    <el-dialog v-model="centerDialogVisibles" title="删除弹框" width="500" align-center>
      <span>确定要删除这条消息吗</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisibles = false">取消</el-button>
          <el-button type="primary" @click="refder(idd)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 回显弹框 -->
    <el-dialog v-model="centerDialogVisiblea" title="新增部门" width="500" align-center>
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="部门名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="部门编码">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="部门负责人">
          <el-select placeholder="部门负责人" clearable v-model="form.managerId">
            <el-option v-for="item in reffus " :label="item.username" :value="item.id" />

          </el-select>
          <!-- <el-input v-model="form.managerId" /> -->
        </el-form-item>
        <el-form-item label="部门介绍">
          <el-input v-model="form.introduce" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="quxiao">取消</el-button>
          <el-button type="primary" @click="xiu(refid)">
            修改
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped></style>
